import styles from './index.less';
import React, { useEffect, useRef, useState } from 'react';
import { Form, Input, Button, Checkbox, DatePicker, Select, Table, Tag, Space, Pagination } from 'antd';
import { useDispatch, useSelector, vipPageModelState } from 'umi';

const { RangePicker }: any = DatePicker;


const vipPage = () => {

  const [form] = Form.useForm();
  const dispatch = useDispatch();

  const onFinish = (values: any) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  const { vipDataList, order } = useSelector((state: { vipData: vipPageModelState }) => state.vipData);
  console.log(vipDataList, '-----会员页面数据');

  // 搜索数据
  const inpData: any = useRef(null)
  const [currents, setcurrents]: any = useState({ current: 1, size: 10 })

  // 请求数据
  useEffect(() => {

    let t = new Date().getTime()

    console.log(t);

    dispatch({
      type: 'vipData/getvipList',
      payload: {
        t: t,
        size: 10,
        current: 1,
      }
    })
  }, []);

  const columns: any = [
    {
      title: '用户昵称',
      dataIndex: 'nickName',
      key: 'nickName',
      width: '140px',
      align: 'center'
    },
    {
      title: '用户头像',
      dataIndex: 'pic',
      key: 'pic',
      align: 'center',
      width: '400px',
      render: (text: any) => {
        return <div>
          <img src={text} alt="" />
        </div>
      }
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      align: 'center',
      render: (status: string) => {
        console.log(status);
        return <div>
          {

            status ? <span style={{ padding: '5px', paddingLeft: '15px', paddingRight: '15px', borderRadius: '3px', background: 'rgb(198, 227, 238)', color: 'rgb(113, 197, 231)' }}>正常</span>

              : <span style={{ padding: '5px', paddingLeft: '15px', paddingRight: '15px', borderRadius: '3px', background: 'rgb(230, 202, 202)', color: 'rgb(221, 151, 151)' }}>禁止</span>
          }
        </div>
      }
    },
    {
      title: '注册时间',
      key: 'modifyTime',
      dataIndex: 'modifyTime',
      align: 'center',

      // render: (tags: any[]) => (
      //   <>
      //     {tags.map(tag => {
      //       let color = tag.length > 5 ? 'geekblue' : 'green';
      //       if (tag === 'loser') {
      //         color = 'volcano';
      //       }
      //       return (
      //         <Tag color={color} key={tag}>
      //           {tag.toUpperCase()}
      //         </Tag>
      //       );
      //     })}
      //   </>
      // ),
    },
    {
      title: '操作',
      key: 'action',
      render: (text: any, record: any) => (
        <Space size="middle">
          <a>编辑{record.name}</a>
        </Space>
      ),
    },
  ];
  return <div className={styles.orderContent}>
    <div className={styles.card}>
      <div className={styles.From}>
        <Form
          layout={"inline"}
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
          form={form}
        >
          <Form.Item
            name="username"
            style={{ width: 240 }}
          >
            <Input placeholder="用户昵称" style={{ width: '200px', height: "30px",marginTop: '5px' }} ref={inpData} />
          </Form.Item>
          <Form.Item name='Select' >
            <Select placeholder="状态" style={{ width: '180px', height: '40px', marginTop: '5px' }} >
              <Select.Option value="demo">禁止</Select.Option>
              <Select.Option value="demo">正常</Select.Option>
            </Select>
          </Form.Item>
          <Button type="primary" htmlType="submit" style={{ marginRight: '14px', marginTop: '5px' }}
            onClick={() => {
              const serachData = inpData.current.input.value
              dispatch({
                type: 'vipData/getvipList',
                payload: {
                  current: setcurrents.current,
                  size: setcurrents.size,
                  nickName: serachData
                }
              })
            }}
          >
            搜索
                  </Button>
                  &nbsp;
                  {/* 清空input里面的值 */}
          <Button htmlType="button" onClick={() => {
            form.resetFields()
          }} style={{ marginRight: '14px', marginTop: '5px' }}>
            清空
               </Button>
        </Form>
      </div>
      <div className={styles.content}>
        <Table columns={columns} dataSource={vipDataList} pagination={false} />

        {/* 分页 */}
        <div className={styles.vipPagination}>
          <Pagination
            total={order.total}
            showSizeChanger
            showQuickJumper
            onChange={(page, pageSize) => {
              setcurrents({ current: page, size: pageSize })
              dispatch({
                type: 'vipData/getvipList',
                payload: {
                  size: pageSize,
                  current: page
                }
              })
            }}
            showTotal={total => `共 ${order.total} 条`}
          />
        </div>
      </div>


    </div>


  </div>
}

export default vipPage